<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../common/tag.jsp"%>
<link href="/resourses/css/bootstrap-slider.min.css" rel="stylesheet">
<h4><span class="glyphicon glyphicon-bookmark" style="color: rgb(255, 140, 60);"> 任务描述</span>
<br>${noteDetail.mission.detail}
</h4>
<h4><span class="glyphicon glyphicon-adjust" style="color: rgb(255, 140, 60);"> 完成比例:<fmt:formatNumber type="percent" value="${noteDetail.completeness}" /></span></h4>
<h4><span class="glyphicon glyphicon-star" style="color: rgb(255, 218, 119);">任务分数:${noteDetail.mission.score}</span></h4>
<h3>
    <span class="glyphicon glyphicon-tasks" style="color: rgb(102, 101, 126);">所属项目名称:${noteDetail.mission.project.name}</span>
</h3>
<h4>
    <span class="glyphicon glyphicon-map-marker" style="color: rgb(102, 101, 126);">
        地址：${noteDetail.mission.project.svnUrl}[${noteDetail.svnRev}]
    </span>

</h4>
<h4><span class="glyphicon glyphicon-certificate" style="color: rgb(102, 101, 126);"> 难易度：${noteDetail.mission.GRADE}</span></h4>
<h4><span class="glyphicon glyphicon-calendar" style="color: rgb(102, 101, 126);"> 任务发布时间:<fmt:formatDate value="${noteDetail.mission.generateDate}" pattern="yyyy年MM月dd日"/></span></h4>
<h4><span class="glyphicon glyphicon-calendar" style="color: rgb(102, 101, 126);"> 任务提交时间:<fmt:formatDate value="${noteDetail.generateDate}" pattern="yyyy年MM月dd日"/>
</span></h4>
<h4>
    <span class="glyphicon glyphicon-list-alt" style="color: rgb(102, 101, 126);"> 难点和关键点：${noteDetail.detail}</span></h4>

<h4><span class="glyphicon glyphicon-user" style="color: rgb(102, 101, 126);">完成者：${noteDetail.submitter.realName}</span></h4>
<c:if test="${noteDetail.state}">审核通过</c:if>

<div id="note_modify" class="hidden">
    <form role="form"  id="modify_info">
        <div class="form-group" id="mod_slider">
            <label for="complete_slider">修改完成度：</label>
            <input class="form-control" type="text" id="complete_slider" name="complete"/>
        </div>
        <div class="form-group" id="mod_comment">
            <label for="note_comment">描述：</label>
            <textarea rows="3" cols="30" form="modify_info" id="note_comment" name="comment"></textarea>
        </div>
        <input type="hidden" name="noteId" value="${noteDetail.id}">
        <div class="btn-group">
            <button class="btn btn-default" type="button" onclick="submitModify()">
                确认
            </button>
            <button class="btn btn-default" type="button" onclick="hiddenModify()">
                取消
            </button>
        </div>
    </form>

</div>

<c:if test="${!noteDetail.state}">
<div class="btn-group" id="pass_buttons">
    <%--<button class="btn btn-default" type="button" onclick="pass(${noteDetail.id})"><em class="glyphicon glyphicon-ok" style="color: rgb(48, 140, 60);"> 一键通过</em> </button>--%>
    <button class="btn btn-default" type="button" onclick="showSlider()"><em class="glyphicon glyphicon-cog" style="color: rgb(48, 140, 60);"> 通过</em></button>
    <%--<button class="btn btn-default" type="button" onclick="showComment()"><em class="glyphicon glyphicon-remove"> 返工</em></button>--%>
</div>
</c:if>
<script src="/resourses/js/bootstrap-slider.min.js"></script>
<script type="application/javascript">
    function pass(noteId){
        $.ajax();
    }

    function submitModify(){
        if(confirm("确认提交")){
            $.ajax({
                type:"POST",
                url:"/t/n/noteCheckSubmit",
                data:$("#modify_info").serialize(),
                dataType:"json",
                success: function (result) {
                    if(result['success']){
                        var data = result['data'];
                        $("#noteNum").html(data.unhandledNum);
                        //刷新B栏
                        home.a.init({
                            "menuId":"h-menu-check"
                        });
                        //刷新C栏
                        home.b.getNoteById(data.noteId);

                    }else{
                        alert(result['error']);
                    }
                }
            });
        }
    }

    function showSlider(){
        var completeSlider = new Slider("input#complete_slider", {
            max : 100,
            value : ${sliderInit}
        });
        $("#note_modify").removeClass("hidden");
        $("#pass_buttons").addClass("hidden");
    }
    function showComment(){
        $("#complete_slider").val(-1);
        $("#mod_slider").addClass("hidden");
        $("#note_modify").removeClass("hidden");
        $("#pass_buttons").addClass("hidden");
    }
    function hiddenModify(){
        $("#note_modify").addClass("hidden");
        $("#pass_buttons").removeClass("hidden");
    }
</script>
